js:import 和 export 的使用

在 JavaScript 模块（Module）系统中，import 和 export 的使用与模块的定义和引入方式有关。让我们一步步来解释背后的原理。

1. export 和 export default 的区别

  • export：用于导出模块中的一个或多个变量、函数或类。这种方式导出的是命名导出（Named Exports），可以在一个文件中导出多个内容。引入这些内容时，必须使用相同的名称，而且要用 {} 来括起来。

    // File: GameObject.js

export class GameObject {

  // ... class definition

}

export const player = new GameObject();

    在其他文件中可以这样导入：

    import { GameObject, player } from "./GameObject";

  • export default：用于导出模块的单一内容，这种方式导出的是默认导出（Default Export），一个文件中只能有一个默认导出。引入时可以自定义导入名称，不需要 {}。

    // File: GameObject.js

export default class GameObject {

  // ... class definition

}

    在其他文件中可以这样导入：

    import GameObject from "./GameObject";

2. 为什么需要 {}？

当使用 export 导出时，相当于在模块内部创建了一个命名空间（Namespace），所有通过 export 导出的内容都作为这个命名空间的属性。因此，在导入时必须使用 {} 来显式指定你想导入的具体属性。就像访问一个对象的属性一样。

3. export default 与 public 类似的概念

在 Java 中，public 修饰符指定类或方法可以在其他包中访问。Java 中的 public class 是文件的主要导出对象，每个 Java 文件最多只能有一个 public 类。这与 JavaScript 的 export default 有一定的相似之处，因为每个模块文件只能有一个默认导出，且默认导出在引入时可以不使用 {}。

4. 为什么命名导出要用 {}？

在 JavaScript 中，每个模块都可以有多个命名导出。为了防止命名冲突，命名导入使用 {} 来区分和指定具体的导出内容。

示例：

假设你有一个 MathUtils.js 文件：

// File: MathUtils.js

export const add = (a, b) => a + b;

export const multiply = (a, b) => a * b;

在另一个文件中引入：

import { add, multiply } from "./MathUtils";

总结

  • export 和 import { ... } 之间的关系类似于在模块文件中创建多个命名的导出变量或函数，而 export default 则允许你导出模块的单一默认内容。
  • 使用 {} 可以精确指明导入的命名内容，从而避免冲突。
  • export default 提供了一个更简洁的方式来导入模块的主要内容，与 Java 中的 public class 具有类似的语义。

项目分区导航： 创建菜单与游戏界面 ⬅️ | 01-js-import 和 export 的使用 | ➡️ 后端配置和调试